import {verifyGetCode} from '@/api/login'
import {uEditUserCompany, uEditUserNearName, uEditUserPhone, uEditMyEmail} from '@/api/user'
import useCountDown from '@/hooks/coundDown'
import {FormInstance} from 'ant-design-vue'
import {PropType} from 'vue'
import {IconImg} from '../image'
import {ChangeVisible} from '../modal'
import {CnBoldSpan, CnMediumSpan, CnNormalSpan} from '../text'
import {message} from '@/libs/global/antDesignVue'

const MFTable = defineComponent({
  setup(props, {slots}) {
    return () => <table class='table-auto w-full mb-20'>{slots.default?.()}</table>
  }
})

const MFTbody = defineComponent({
  setup(props, {slots}) {
    return () => <tbody>{slots.default?.()}</tbody>
  }
})

const MFTr = defineComponent({
  setup(props, {slots}) {
    return () => <tr class='h-56'>{slots.default?.()}</tr>
  }
})

const MFTdByLabel = defineComponent({
  setup(props, {slots}) {
    return () => <td class='text-right pl-24'>{slots.default?.()}</td>
  }
})

const MFTdByValue = defineComponent({
  setup(props, {slots}) {
    return () => <td class='text-left'>{slots.default?.()}</td>
  }
})

const MFTdByUnit = defineComponent({
  setup(props, {slots}) {
    return () => <td class='text-left  pr-24'>{slots.default?.()}</td>
  }
})

export const EditUserCompanyNameModalForm = defineComponent({
  name: 'EditUserCompanyNameModalForm',
  props: {
    changeVisible: Function as PropType<ChangeVisible>,
    userInfo: {
      type: Object as PropType<User.Info>,
      required: true
    }
  },
  emits: {
    finish: (formRef?: FormInstance) => true,
    reset: (formRef?: FormInstance) => true
  },
  setup(props, {emit, slots}) {
    const state = reactive<{
      newCompanyName: string
      spinning: boolean
    }>({
      newCompanyName: '',
      spinning: false
    })

    function handleConfirmClick() {
      state.spinning = true
      uEditUserCompany({
        userid: props.userInfo.userId,
        userCompany: state.newCompanyName
      })
        .then(res => {
          state.spinning = false
          props.changeVisible && props.changeVisible(false)
          emit('finish')
        })
        .catch(err => {
          state.spinning = false
          props.changeVisible && props.changeVisible(false)
        })
    }

    function handleCancelClick() {
      props.changeVisible && props.changeVisible(false)
      emit('finish')
    }

    onMounted(() => {
      state.newCompanyName = props.userInfo.userCompany
    })

    return () => (
      <div class='relative'>
        <MFTable>
          <MFTbody>
            <MFTr>
              <MFTdByLabel>
                <CnBoldSpan>公司名称：</CnBoldSpan>
              </MFTdByLabel>
              <MFTdByValue class='relative'>
                <a-input
                  class='h-30'
                  placeholder='请输入您的公司名称'
                  v-model={[state.newCompanyName, 'value']}
                ></a-input>
              </MFTdByValue>
              <MFTdByUnit></MFTdByUnit>
            </MFTr>

            <MFTr>
              <td colspan={3}>
                <div class='h-26 leading-26 bg-primaryLight mx-24 px-6 flex items-center rounded-2'>
                  <IconImg imgName='info' class='w-16 h-16 mr-6'></IconImg>
                  <CnNormalSpan>正确的填写公司名称，设备管理才能更加便利</CnNormalSpan>
                </div>
              </td>
            </MFTr>
          </MFTbody>
        </MFTable>

        <div class='ant-modal-footer'>
          <a-button loading={state.spinning} class='ant-btn' onClick={handleCancelClick}>
            取消
          </a-button>
          <a-button class='ant-btn' type='primary' onClick={handleConfirmClick}>
            确定
          </a-button>
        </div>
      </div>
    )
  }
})

export const EditUserCompanyEmailModalForm = defineComponent({
  name: 'EditUserCompanyNameModalForm',
  props: {
    changeVisible: Function as PropType<ChangeVisible>,
    userInfo: {
      type: Object as PropType<User.Info>,
      required: true
    }
  },
  emits: {
    finish: (formRef?: FormInstance) => true,
    reset: (formRef?: FormInstance) => true
  },
  setup(props, {emit, slots}) {
    const state = reactive<{
      newCompanyName: string
      spinning: boolean
    }>({
      newCompanyName: '',
      spinning: false
    })

    function handleConfirmClick() {
      state.spinning = true
      uEditMyEmail({
        userId: props.userInfo.userId,
        userEmail: state.newCompanyName
      })
        .then(res => {
          state.spinning = false
          props.changeVisible && props.changeVisible(false)
          emit('finish')
        })
        .catch(err => {
          state.spinning = false
          props.changeVisible && props.changeVisible(false)
        })
    }

    function handleCancelClick() {
      props.changeVisible && props.changeVisible(false)
      emit('finish')
    }

    onMounted(() => {
      state.newCompanyName = props.userInfo.userEmail
    })

    return () => (
      <div class='relative'>
        <MFTable>
          <MFTbody>
            <MFTr>
              <MFTdByLabel>
                <CnBoldSpan>用户邮箱：</CnBoldSpan>
              </MFTdByLabel>
              <MFTdByValue class='relative'>
                <a-input
                  class='h-30'
                  placeholder='请输入您的公司名称'
                  v-model={[state.newCompanyName, 'value']}
                ></a-input>
              </MFTdByValue>
              <MFTdByUnit></MFTdByUnit>
            </MFTr>

            <MFTr>
              <td colspan={3}>
                <div class='h-26 leading-26 bg-primaryLight mx-24 px-6 flex items-center rounded-2'>
                  <IconImg imgName='info' class='w-16 h-16 mr-6'></IconImg>
                  <CnNormalSpan>正确的填写邮箱，设备管理才能更加便利</CnNormalSpan>
                </div>
              </td>
            </MFTr>
          </MFTbody>
        </MFTable>

        <div class='ant-modal-footer'>
          <a-button loading={state.spinning} class='ant-btn' onClick={handleCancelClick}>
            取消
          </a-button>
          <a-button class='ant-btn' type='primary' onClick={handleConfirmClick}>
            确定
          </a-button>
        </div>
      </div>
    )
  }
})

export default EditUserCompanyNameModalForm
